<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>Cap&iacute;tulo 4. Elementos de pantalla avanzados</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="Parte_2.html" title="Parte&nbsp;II.&nbsp;Elementos de gvHidra">
      <link rel="prev" href="ch03s10.html" title="3.10. Uso de datos por defecto">
      <link rel="next" href="ch04s02.html" title="4.2. Componentes complejos">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">Cap&iacute;tulo 4. Elementos de pantalla avanzados</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch03s10.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Parte&nbsp;II.&nbsp;Elementos de gvHidra</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="chapter" title="Cap&iacute;tulo 4. Elementos de pantalla avanzados">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title"><a name="d4e3289"></a>Cap&iacute;tulo 4. Elementos de pantalla avanzados
                  </h2>
               </div>
            </div>
         </div>
         <div class="toc">
            <p><b>Tabla de contenidos</b></p>
            <dl>
               <dt><span class="section"><a href="ch04.html#d4e3291">4.1. Patrones complejos</a></span></dt>
               <dd>
                  <dl>
                     <dt><span class="section"><a href="ch04.html#d4e3294">4.1.1. Maestro/Detalle</a></span></dt>
                     <dt><span class="section"><a href="ch04.html#d4e3444">4.1.2. &Aacute;rbol</a></span></dt>
                  </dl>
               </dd>
               <dt><span class="section"><a href="ch04s02.html">4.2. Componentes complejos</a></span></dt>
               <dd>
                  <dl>
                     <dt><span class="section"><a href="ch04s02.html#d4e3579">4.2.1. Ventana de selecci&oacute;n</a></span></dt>
                     <dt><span class="section"><a href="ch04s02.html#d4e3682">4.2.2. Selector</a></span></dt>
                  </dl>
               </dd>
               <dt><span class="section"><a href="ch04s03.html">4.3. Tratamiento de ficheros</a></span></dt>
               <dd>
                  <dl>
                     <dt><span class="section"><a href="ch04s03.html#d4e3733">4.3.1. Manejo de ficheros de im&aacute;genes</a></span></dt>
                     <dt><span class="section"><a href="ch04s03.html#d4e3766">4.3.2. Manejo de ficheros de cualquier tipo</a></span></dt>
                     <dt><span class="section"><a href="ch04s03.html#d4e3772">4.3.3. Importar datos a la BD desde fichero</a></span></dt>
                  </dl>
               </dd>
               <dt><span class="section"><a href="ch04s04.html">4.4. Control de la Navegaci&oacute;n. Saltando entre ventanas</a></span></dt>
               <dd>
                  <dl>
                     <dt><span class="section"><a href="ch04s04.html#d4e3793">4.4.1. Implementaci&oacute;n</a></span></dt>
                  </dl>
               </dd>
               <dt><span class="section"><a href="ch04s05.html">4.5. Carga din&aacute;mica de clases</a></span></dt>
               <dd>
                  <dl>
                     <dt><span class="section"><a href="ch04s05.html#d4e3871">4.5.1. Introducci&oacute;n</a></span></dt>
                     <dt><span class="section"><a href="ch04s05.html#d4e3891">4.5.2. Ejemplos de utilizaci&oacute;n</a></span></dt>
                  </dl>
               </dd>
            </dl>
         </div>
           
         
           
         <div class="section" title="4.1. Patrones complejos">
            <div class="titlepage">
               <div>
                  <div>
                     <h2 class="title" style="clear: both"><a name="d4e3291"></a>4.1. Patrones complejos
                     </h2>
                  </div>
               </div>
            </div>
                
            
                
            <p><a name="C4Avanzados"></a></p>
            
                
            <div class="section" title="4.1.1. Maestro/Detalle">
               <div class="titlepage">
                  <div>
                     <div>
                        <h3 class="title"><a name="d4e3294"></a>4.1.1. Maestro/Detalle
                        </h3>
                     </div>
                  </div>
               </div>
                     
               
                     
               <div class="section" title="4.1.1.1. Maestro/Detalle">
                  <div class="titlepage">
                     <div>
                        <div>
                           <h4 class="title"><a name="d4e3296"></a>4.1.1.1. Maestro/Detalle
                           </h4>
                        </div>
                     </div>
                  </div>
                          
                  
                          
                  <p>Un maestro-detalle es el caso de una ventana con paneles
                             dependientes, este caso no se diferencia mucho de una ventana normal
                             de gvHidra aunque tiene sus peculiaridades.
                  </p>
                  
                          
                  <p>Al igual que en las ventanas "normales", en primer lugar se debe
                             crear una clase por cada uno de los paneles que aparezcan en la
                             pantalla, es decir, una clase para el maestro y una para el detalle.
                             Como siempre estas clases se depositar&aacute;n en el directorio actions de
                             la estructura de la aplicaci&oacute;n.
                  </p>
                  
                          
                  <p>Las clases, tanto la del maestro como la del detalle, son como
                             cualquier clase de un panel, tal y como se ha explicado en el punto
                             <a class="link" href="ch03s02.html#tiposPantalla">3.2.2 Paso a paso</a>, salvo unas
                             anotaciones:
                  </p>
                  
                          
                  <div class="itemizedlist">
                     <ul class="itemizedlist" type="disc">
                        <li class="listitem">
                                       
                           <p><span class="emphasis"><em>Clase manejadora del maestro</em></span>.
                           </p>
                           
                                       
                           <p>Un panel que tenga otro/s panel/es dependiente/s tendr&aacute;n que
                                          utilizar el m&eacute;todo <span class="bold"><strong>addHijo()</strong></span> en
                                          el constructor de la clase. A este m&eacute;todo se le pasan tres
                                          par&aacute;metros, el primero es el nombre de la clase hija, el segundo y
                                          tercer par&aacute;metro son dos arrays que definir&aacute;n por qu&eacute; campos se
                                          establece la relaci&oacute;n entre maestro y detalle. El segundo es un
                                          array con los campos del padre que van a ser utilizados para
                                          recargar el hijo, y el tercer par&aacute;metro, un array con el nombre de
                                          los campos del detalle que se corresponden con los del
                                          maestro.
                           </p>
                           
                                       
                           <div class="informalexample">
                                            
                              
                                            <pre class="programlisting">class TinvTipos extends gvHidraForm_DB
{
   function TinvTipos()
   {
      ...
      $this-&gt;<span class="bold"><strong>addHijo</strong></span>("TinvSubtipos",array("lisCodigoTipo"),array("ediCodigoTipo"));
      ...
   }
}</pre>
                                          </div>
                           
                                       
                           <p>Por ejemplo, tenemos que crear un mantenimiento para dos
                                          tablas: tipos y subtipos. Estas tablas tienen una relaci&oacute;n 1:N
                                          (por cada tipo pueden haber N subtipos). Implementado en gvHidra,
                                          tendremos dos clases en el directorio actions (p.e. TinvTipos y
                                          TinvSubtipos). La clase <span class="emphasis"><em>TinvTipos</em></span> tiene un
                                          hijo que se llama <span class="emphasis"><em>TinvSubtipos</em></span>. El campo de
                                          la tpl <span class="emphasis"><em>ediCodigoTipo</em></span> (en el panel maestro),
                                          se utiliza para identificar a los subtipos (los detalles) y en el
                                          panel detalle existe un campo que hace referencia al campo del
                                          maestro y cuyo nombre es lisCodigoTipo.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p><span class="emphasis"><em>Clase manejadora del detalle</em></span>.
                           </p>
                           
                                       
                           <p>Igual que en el maestro, el detalle tambi&eacute;n tiene que tener
                                          una referencia a su padre. Concretamente se debe utilizar el
                                          m&eacute;todo <span class="bold"><strong>addPadre()</strong></span> en el
                                          constructor de la clase, donde se le pasar&aacute; como par&aacute;metro el
                                          nombre de la clase que maneja el panel maestro. Por tanto,
                                          siguiendo con nuestro ejemplo, la clase TinvSubtipos debe
                                          incorporar la siguiente l&iacute;nea:
                           </p>
                           
                                       
                           <div class="informalexample">
                                            
                              
                                            <pre class="programlisting">class TinvSubtipos extends gvHidraForm_DB 
{

     function TinvSubtipos() 
     {
        ...
        $this-&gt;<span class="bold"><strong>addPadre</strong></span>("TinvTipos");
        ...
     }
}</pre>
                                          </div>
                                     
                        </li>
                     </ul>
                  </div>
                  
                          
                  <p>El siguiente cambio respecto a las ventanas "normales" viene en
                             la creaci&oacute;n de los paneles en los ficheros ubicados en el directorio
                             <span class="emphasis"><em>views</em></span>. Deberemos definir los dos paneles, maestro
                             y detalle, a partir de la clase IgepPanel. Una vez definidos debemos
                             utilizar el m&eacute;todo de la clase <span class="bold"><strong>IgepPantalla,</strong></span> <span class="bold"><strong>agregarPanelDependiente()</strong></span>, para agregar el
                             panel detalle al maestro. A este m&eacute;todo se le han de pasar dos
                             par&aacute;metros, el primero debe ser el panel a agregar y, el segundo, el
                             nombre de la clase que maneja el panel padre. El fichero de views
                             podr&iacute;a quedar as&iacute;:
                  </p>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">&lt;?php
<span class="bold"><strong>$comportamientoVentana = new IgepPantalla();</strong></span>

// Definici&oacute;n del MAESTRO
$panelMaestro = new IgepPanel('TinvTipos',"<span class="bold"><strong>smty_datosTablaM</strong></span>");
$panelMaestro-&gt;activarModo("fil","estado_fil");
$panelMaestro-&gt;activarModo("lis","estado_lis");
$comportamientoVentana-&gt;agregarPanel($panelMaestro);

// Definici&oacute;n del DETALLE 
$panelDetalle = new IgepPanel('TinvSubtipos',"<span class="bold"><strong>smty_datosFichaD</strong></span>");
$panelDetalle-&gt;activarModo("edi","estado_edi");
// Agregamos el panel detalle al maestro
<span class="bold"><strong>$comportamientoVentana-&gt;agregarPanelDependiente($panelDetalle,"TinvTipos");</strong></span>

$s-&gt;display('tablasMaestras/p_tiposubtipo.tpl');
?&gt;</pre>
                             </div>
                  
                          
                  <p>Finalmente, en la plantilla (tpl) para un maestro detalle
                             tambi&eacute;n tiene algunas caracter&iacute;sticas que destacar de una plantilla
                             para una ventana sencilla. Vamos a ver los puntos:
                  </p>
                  
                          
                  <div class="itemizedlist">
                     <ul class="itemizedlist" type="disc">
                        <li class="listitem">
                                       
                           <p>Hay que indicar que es un panel maestro con el atributo
                                          <span class="bold"><strong>esMaestro</strong></span> del plugin <span class="bold"><strong>CWPanel</strong></span> (esMaestro="true")
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>El par&aacute;metro <span class="bold"><strong>itemSeleccionado</strong></span> del plugin <span class="bold"><strong>CWPanel</strong></span> es un par&aacute;metro interno para el
                                          correcto funcionamiento de gvHidra, por eso se asigna a una
                                          variable smarty, <span class="bold"><strong>itemSeleccionado=$smty_filaSeleccionada</strong></span>,
                                          para mantener el maestro seleccionado.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>El bot&oacute;n tooltip (<span class="bold"><strong>CWBotonTooltip</strong></span>) para insertar registros en
                                          el maestro tiene un par&aacute;metro <span class="bold"><strong>ocultarMD</strong></span> con el que le indicamos qu&eacute; panel
                                          se debe ocultar cuando pasamos a modo inserci&oacute;n, ya que va a ser
                                          un registro nuevo del maestro por lo tanto a&uacute;n no tiene
                                          detalle.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>En el plugin <span class="bold"><strong>CWContenedorPestanyas</strong></span> se tiene que indicar
                                          con el par&aacute;metro <span class="bold"><strong>id</strong></span> si las
                                          pesta&ntilde;as son del maestro o del detalle.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>Las pesta&ntilde;as del panel maestro (<span class="bold"><strong>CWPestanya</strong></span>) tienen unos par&aacute;metros,
                                          <span class="bold"><strong>mostrar</strong></span> y <span class="bold"><strong>ocultar</strong></span>, con los que se indicar&aacute; si el
                                          panel detalle lo queremos visible o no. Adem&aacute;s est&aacute; el par&aacute;metro
                                          <span class="bold"><strong>panelAsociado</strong></span> donde se indica a
                                          qu&eacute; panel se refiere esa pesta&ntilde;a, ya que vamos a tener pesta&ntilde;as
                                          tanto para el maestro como para el detalle.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>Llegamos a la parte de definir el detalle, establecemos una
                                          condici&oacute;n con sintaxis de smarty <span class="bold"><strong>{if
                                                count($smty_datosTablaM) gt 0}</strong></span>, para que no nos muestre
                                          el panel detalle si no hay datos en el maestro.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>El identificador, <span class="bold"><strong>id</strong></span>, que
                                          le demos al panel del detalle (<span class="bold"><strong>CWPanel</strong></span>) deber&aacute; ser lisDetalle, en el caso
                                          de estar en un modo tabular, o ediDetalle, en modo registro.
                                          Tambi&eacute;n hay que indicar el par&aacute;metro <span class="bold"><strong>detalleDe</strong></span> pas&aacute;ndole el <span class="bold"><strong>id</strong></span> del maestro.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>Tanto si el detalle es una ficha (<span class="bold"><strong>CWFichaEdicion</strong></span>) como un tabular (<span class="bold"><strong>CWTabla</strong></span>) hay que definir su <span class="bold"><strong>id</strong></span>, <span class="emphasis"><em>FichaDetalle</em></span> o
                                          <span class="emphasis"><em>TablaDetalle</em></span>, respectivamente.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>En el panel del detalle es necesario definir el o los campos
                                          que contengan la clave del maestro. En el siguiente ejemplo
                                          tenemos un maestro-detalle, siendo la clave del maestro el campo
                                          "<span class="emphasis"><em>lisCodigoTipo</em></span>", el detalle necesita del
                                          valor de este campo, para ello vemos que en el panel del detalle
                                          tenemos un campo "<span class="emphasis"><em>ediCodigoTipo</em></span>", que ser&aacute; el
                                          que nos relacione el detalle con su maestro. Para que el campo del
                                          detalle tenga el valor de la clave del maestro hay que definir su
                                          propiedad value, en el ejemplo <span class="bold"><strong>value=$defaultData_TinvSubtipos.ediCodigoTipo</strong></span>.
                           </p>
                           
                                       
                           <p>Si nos encontramos en el caso de un detalle
                                          "Tabular-Registro" hay que definir estos campos clave tanto para
                                          el panel tabular como para el panel registro.
                           </p>
                                     
                        </li>
                     </ul>
                  </div>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">{CWVentana tipoAviso=$smty_tipoAviso codAviso=$smty_codError descBreve=$smty_descBreve textoAviso=$smty_textoAviso onLoad=$smty_jsOnLoad}
{CWBarra usuario=$smty_usuario codigo=$smty_codigo customTitle=$smty_customTitle}
  {CWMenuLayer name="$smty_nombre" cadenaMenu="$smty_cadenaMenu"}
{/CWBarra}

{CWMarcoPanel conPestanyas="true"}

&lt;!-- *********************** PANEL MAESTRO ***********************--&gt;
&lt;!--*********** PANEL fil ******************--&gt;
  {CWPanel id="fil" action="buscar" method="post" estado=$estado_fil  claseManejadora="TinvTipos"}
     {CWBarraSupPanel titulo="Tipos de Bienes"}
        {CWBotonTooltip imagen="04" titulo="Limpiar Campos" funcion="limpiar" actuaSobre="ficha"}
     {/CWBarraSupPanel}
     {CWContenedor}
        {CWFicha}
              &lt;br /&gt;
            &amp;nbsp;&amp;nbsp;{CWCampoTexto nombre="filCodigoTipo" editable="true" size="2" textoAsociado="C&oacute;digo de Tipo" dataType=$dataType_TinvTipos.filCodigoTipo}
            &lt;br /&gt;&lt;br /&gt;
            &amp;nbsp;&amp;nbsp;{CWCampoTexto nombre="filDescTipo" editable="true" size="30" textoAsociado="Descripci&oacute;n de Tipo" dataType=$dataType_TinvTipos.filDescTipo}
            &lt;br /&gt;&lt;br /&gt;
        {/CWFicha}
     {/CWContenedor}
     {CWBarraInfPanel}
      {CWBoton imagen="50" texto="Buscar" class="boton" accion="buscar"}
     {/CWBarraInfPanel}
  {/CWPanel}

&lt;!--*********** PANEL lis ******************--&gt;
  {CWPanel id="lis" tipoComprobacion="envio" <span class="bold"><strong>esMaestro="true"</strong></span> <span class="bold"><strong>itemSeleccionado=$smty_filaSeleccionada</strong></span> action="operarBD" method="post" estado=$estado_lis claseManejadora="TinvTipos"}
     {CWBarraSupPanel titulo="Tipos de Bienes"}
        {CWBotonTooltip imagen="01" titulo="Insertar registros" funcion="insertar" actuaSobre="tabla" <span class="bold"><strong>ocultarMD="Detalle"</strong></span>}
        {CWBotonTooltip imagen="02" titulo="Modificar registros" funcion="modificar" actuaSobre="tabla"}
        {CWBotonTooltip imagen="03" titulo="Eliminar registros" funcion="eliminar" actuaSobre="tabla"}
          {CWBotonTooltip imagen="04" titulo="Limpiar Campos" funcion="limpiar" actuaSobre="tabla"}
     {/CWBarraSupPanel}
     {CWContenedor}
      {CWTabla conCheck="true" conCheckTodos="false" id="Tabla1" numFilasPantalla="4" datos=$smty_datosTablaM}
         {CWFila tipoListado="false"}
            {CWCampoTexto nombre="lisCodigoTipo" editable="nuevo" size="2" textoAsociado="Cod.Tipo" dataType=$dataType_TinvTipos.lisCodigoTipo}
            {CWCampoTexto nombre="lisDescTipo" editable="true" size="25" textoAsociado="Tipo" dataType=$dataType_TinvTipos.lisDescTipo}
         {/CWFila}
         {CWPaginador enlacesVisibles="3"}
      {/CWTabla}
     {/CWContenedor}
     {CWBarraInfPanel}
      {CWBoton imagen="41" texto="Guardar" class="boton" accion="guardar"}
      {CWBoton imagen="42" texto="Cancelar" class="boton" accion="cancelar"}
     {/CWBarraInfPanel}
  {/CWPanel}

&lt;!-- ****************** PESTA&Ntilde;AS ************************--&gt;
  {CWContenedorPestanyas <span class="bold"><strong>id="Maestro"</strong></span>}
     {CWPestanya tipo="fil" <span class="bold"><strong>panelAsociado="fil"</strong></span> estado=$estado_fil <span class="bold"><strong>ocultar="Detalle"</strong></span>}
     {CWPestanya tipo="lis" <span class="bold"><strong>panelAsociado="lis"</strong></span> estado=$estado_lis <span class="bold"><strong>mostrar="Detalle"</strong></span>}
  {/CWContenedorPestanyas}
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;
&lt;!-- ****************** PANEL DETALLE ***********************--&gt;
  <span class="bold"><strong>{if count($smty_datosTablaM) gt 0}</strong></span>
   {CWPanel <span class="bold"><strong>id="ediDetalle"</strong></span> tipoComprobacion="envio" action="operarBD" <span class="bold"><strong>detalleDe="lis"</strong></span> method="post" estado="on" claseManejadora="TinvSubtipos"}
   {CWBarraSupPanel titulo="Subtipos de Bienes"}
      {CWBotonTooltip imagen="01" titulo="Insertar registros" funcion="insertar" actuaSobre="ficha"}
      {CWBotonTooltip imagen="02" titulo="Modificar registros" funcion="modificar" actuaSobre="ficha"}
      {CWBotonTooltip imagen="03" titulo="Eliminar registros" funcion="eliminar" actuaSobre="ficha"}
   {/CWBarraSupPanel}
   {CWContenedor}
      {CWFichaEdicion <span class="bold"><strong>id="FichaDetalle"</strong></span> datos=$smty_datosFichaD}
         {CWFicha}
            &lt;br /&gt;&lt;br /&gt;
            {CWCampoTexto nombre="ediCodigoSubtipo" editable="nuevo" size="3" textoAsociado="C&oacute;digo" dataType=$dataType_TinvSubtipos.ediCodigoSubtipo}
            &lt;br /&gt;&lt;br /&gt;
            {CWCampoTexto nombre="ediDescSubtipo" editable="true" size="35" textoAsociado="Descripci&oacute;n" dataType=$dataType_TinvSubtipos.ediDescSubtipo}
            &lt;br /&gt;&lt;br /&gt;
            {CWCampoTexto nombre="ediCodigoTipo" oculto="true" <span class="bold"><strong>value=$defaultData_TinvSubtipos.ediCodigoTipo</strong></span>}
         {/CWFicha}
         {CWPaginador enlacesVisibles="3"}
      {/CWTabla}
   {/CWContenedor}
   {CWBarraInfPanel}
      {CWBoton imagen="41" texto="Guardar" class="boton" accion="guardar"}
      {CWBoton imagen="42" texto="Cancelar" class="boton" accion="cancelar"}
   {/CWBarraInfPanel}
  {/CWPanel}
&lt;!-- ****************** PESTA&Ntilde;AS ************************--&gt;
  {CWContenedorPestanyas <span class="bold"><strong>id="Detalle"</strong></span>}
   {CWPestanya tipo="lis" <span class="bold"><strong>panelAsociado="ediDetalle"</strong></span> estado=$estado_edi}
  {/CWContenedorPestanyas}
 {/if}
{/CWMarcoPanel}
{/CWVentana}</pre>
                             </div>
                  
                          
                  <p>Una vez tenemos claro como definir los ficheros correspondientes
                             a la pantalla, vamos a comentar un aspecto del <span class="bold"><strong>mappings.php</strong></span> respecto a un maestro/detalle.
                             Respecto al maestro, hay que a&ntilde;adir una entrada que permita recargar
                             el detalle a partir del registro seleccionado en el maestro, para ello
                             se deben agregar las siguientes l&iacute;neas en el mappings.php para la
                             clase del maestro:
                  </p>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">$this-&gt;_AddMapping('TinvTipos__<span class="bold"><strong>recargar</strong></span>', 'TinvTipos');
$this-&gt;_AddForward('TinvTipos__<span class="bold"><strong>recargar</strong></span>', 'gvHidraSuccess', 'index.php?view=views/patronesMD/M(FIL-LIS)-D(LIS)/p_tiposubtipo.php&amp;panel=listar');
$this-&gt;_AddForward('TinvTipos__<span class="bold"><strong>recargar</strong></span>', 'gvHidraError', 'index.php?view=views/patronesMD/M(FIL-LIS)-D(LIS)/p_tiposubtipo.php&amp;panel=listar');</pre>
                             </div>
                        
               </div>
               
                     
               <div class="section" title="4.1.1.2. Maestro/NDetalles">
                  <div class="titlepage">
                     <div>
                        <div>
                           <h4 class="title"><a name="d4e3404"></a>4.1.1.2. Maestro/NDetalles
                           </h4>
                        </div>
                     </div>
                  </div>
                          
                  
                          
                  <p>En este caso nos encontramos con un maestro con m&aacute;s de un
                             detalle, visualmente tendremos un panel superior que corresponder&aacute; con
                             el maestro, y en la parte inferior tendremos los detalles, estos ser&aacute;n
                             accesibles mediante unas solapas superiores (ver imagen en el cap&iacute;tulo
                             X Caracter&iacute;sticas t&eacute;cnicas).
                  </p>
                  
                          
                  <p>En general, la forma de funcionar es muy parecida al
                             maestro-detalle explicado en el punto anterior, salvo peque&ntilde;as
                             diferencias. Igual que siempre, tenemos que definir una clase por cada
                             panel, es decir, una por el maestro y otra por cada detalle que
                             vayamos a tener. En este caso, en el maestro tenemos que a&ntilde;adir la
                             referencia a todos los detalles que se vayan a tener con el m&eacute;todo
                             <span class="bold"><strong>addHijo()</strong></span>.
                  </p>
                  <div class="informalexample">
                                 
                     
                                 <pre class="programlisting">class Expedientes extends gvHidraForm_DB
{
   function Expedientes()
   {
      ...
      $this-&gt;<span class="bold"><strong>addHijo</strong></span>('informes',array('ediNexpediente'),array('lisNexpediente'));
      $this-&gt;<span class="bold"><strong>addHijo</strong></span>('deficiencias',array('ediNexpediente'),array('lisNexpediente'));
      ...
   }
}</pre>
                               </div>
                  
                          
                  <p>Los paneles detalle a&ntilde;adir&aacute;n la referencia al padre igual que en
                             el caso de un maestro-detalle simple, con el m&eacute;todo <span class="bold"><strong>addPadre()</strong></span>.
                  </p>
                  
                          
                  <p>En el fichero de views tendremos que definir todos los paneles
                             detalle que tengamos y agregarlos con el m&eacute;todo <span class="bold"><strong>agregarPanelDependiente()</strong></span>. Otra peculiaridad de
                             este panel es que tenemos que definir las solapas que ir&aacute;n asociadas a
                             los paneles detalle, para ello tenemos que definir un array asociativo
                             con tantos arrays como detalles, estos deben tener dos claves,
                             "<span class="emphasis"><em>panelActivo</em></span>" y
                             "<span class="emphasis"><em>titDetalle</em></span>", que se corresponden,
                             respectivamente, con el nombre de la clase manejadora del detalle y el
                             texto que queramos que aparezca en la solapa. Otro punto a tener en
                             cuenta es indicar qu&eacute; detalle queremos que aparezca activo, para ello
                             tenemos que asignar a la variable smarty
                             <span class="emphasis"><em>smty_panelActivo</em></span> el nombre de la clase manejadora
                             que queramos.
                  </p>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">&lt;?php
//MAESTRO
$comportamientoVentana= new IgepPantalla();
$panelMaestro = new IgepPanel('expedientes',"smty_datosTablaM");
$panelMaestro-&gt;activarModo("fil","estado_fil");
$panelMaestro-&gt;activarModo("edi","estado_edi");
$datosPanel = $comportamientoVentana-&gt;agregarPanel($panelMaestro);

//DETALLE 
$panelDetalle = new IgepPanel('informes',"smty_datosInformes");
$panelDetalle-&gt;activarModo("lis","estado_lis");
$datosPanelDetalle = $comportamientoVentana-&gt;<span class="bold"><strong>agregarPanelDependiente</strong></span>($panelDetalle,"expedientes");

$panelDetalle = new IgepPanel('deficiencias',"smty_datosDeficiencias");
$panelDetalle-&gt;activarModo("edi","estado_edi");
$datosPanelDetalle = $comportamientoVentana-&gt;<span class="bold"><strong>agregarPanelDependiente</strong></span>($panelDetalle,"expedientes");

// Botones detalles
// panelActivo: Nombre de la clase manejadora del detalle q vamos a activar
// titDetalle: T&iacute;tulo q aparecer&aacute; en la pesta&ntilde;a del panel
<span class="bold"><strong>$detalles</strong></span> = array (
      array (
            "<span class="bold"><strong>panelActivo</strong></span>" =&gt;"informes", 
            "<span class="bold"><strong>titDetalle</strong></span>" =&gt;"Informes"
      ),
      array (
            "panelActivo" =&gt;"deficiencias",
            "titDetalle" =&gt;"Deficiencias"
      )
);
<span class="bold"><strong>$s-&gt;assign('smty_detalles',$detalles);</strong></span>

<span class="bold"><strong>$s-&gt;assign('smty_panelActivo','informes');</strong></span>

$s-&gt;display('MaestroNDetalles/p_expedientes.tpl');
?&gt;</pre>
                             </div>
                  
                          
                  <p>En la tpl tambi&eacute;n hay que se&ntilde;alar algunas diferencias respecto a
                             un maestro-detalle simple. La parte que corresponde al maestro es
                             exactamente igual que la explicada para el maestro-detalle, las
                             diferencias las encontramos en la parte que corresponde a los
                             detalles. Vamos a verlo por puntos:
                  </p>
                  
                          
                  <div class="itemizedlist">
                     <ul class="itemizedlist" type="disc">
                        <li class="listitem">
                                       
                           <p>Vemos en la secci&oacute;n detalles se comprueba, mediante un if de
                                          smarty, si en el maestro hay datos. Si los hay pasamos a dibujar
                                          las solapas de los diferentes detalles con el plugin <span class="bold"><strong>CWDetalles</strong></span>.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p>A continuaci&oacute;n englobamos cada panel detalle dentro de un if
                                          condicional que comprueba si el panel es el activo por
                                          defecto.
                           </p>
                                     
                        </li>
                     </ul>
                  </div>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">&nbsp;&nbsp;1 {CWVentana tipoAviso=$smty_tipoAviso codAviso=$smty_codError descBreve=$smty_descBreve textoAviso=$smty_textoAviso onLoad=$smty_jsOnLoad}
&nbsp;&nbsp;&nbsp; {CWBarra usuario=$smty_usuario codigo=$smty_codigo customTitle=$smty_customTitle}
&nbsp;&nbsp;&nbsp; {CWMenuLayer name="$smty_nombre" cadenaMenu="$smty_cadenaMenu"}
&nbsp;&nbsp;&nbsp; {/CWBarra}
&nbsp;&nbsp;5  
&nbsp;&nbsp;&nbsp; {CWMarcoPanel conPestanyas="true"}
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;!-- *********************** PANEL MAESTRO ***********************--&gt;
&nbsp;&nbsp;&nbsp; &lt;!--*********** PANEL fil ******************--&gt;
&nbsp;10  {CWPanel id="fil" action="buscar" method="post" estado=$estado_fil  claseManejadora="expedientes"}
&nbsp;&nbsp;&nbsp;  ...
&nbsp;&nbsp;&nbsp;  {/CWPanel}
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;!-- ****************** PANEL edi ***********************--&gt;
&nbsp;15  {CWPanel id="edi" tipoComprobacion="envio" esMaestro="true" itemSeleccionado=$smty_filaSeleccionada action="operarBD" method="post" estado="$estado_edi" claseManejadora="expedientes" accion=$smty_operacionFichaexpedientes}
&nbsp;&nbsp;&nbsp;  ...
&nbsp;&nbsp;&nbsp;  {/CWPanel}
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;!-- ****************** PESTA&Ntilde;AS ************************--&gt;
&nbsp;20  {CWContenedorPestanyas id="Maestro"}
&nbsp;&nbsp;&nbsp;    {CWPestanya tipo="fil" panelAsociado="fil" estado=$estado_fil ocultar="Detalle"}
&nbsp;&nbsp;&nbsp;    {CWPestanya tipo="edi" panelAsociado="edi" estado=$estado_edi mostrar="Detalle"}
&nbsp;&nbsp;&nbsp;  {/CWContenedorPestanyas}
&nbsp;&nbsp;&nbsp; 
&nbsp;25 &lt;!-- ****************** PANELES DETALLES ***********************--&gt;
&nbsp;&nbsp;&nbsp; <span class="bold"><strong>&lt;/td&gt;&lt;/tr&gt;</strong></span>
&nbsp;&nbsp;&nbsp; <span class="bold"><strong>{if count($smty_datosTablaM ) gt 0 }</strong></span>
&nbsp;&nbsp;&nbsp; <span class="bold"><strong> {CWDetalles claseManejadoraPadre="expedientes" detalles=$smty_detalles panelActivo=$smty_panelActivo}</strong></span>
&nbsp;&nbsp;&nbsp; <span class="bold"><strong>&lt;tr&gt;&lt;td&gt;</strong></span>
&nbsp;30 
&nbsp;&nbsp;&nbsp; &lt;!-- ****************** Detalle 1: INFORMES ***********************--&gt;
&nbsp;&nbsp;&nbsp;  <span class="bold"><strong>{if $smty_panelActivo eq "informes"}</strong></span>
&nbsp;&nbsp;&nbsp;    {CWPanel id="lisDetalle" tipoComprobacion="envio" action="operarBD" method="post" detalleDe="edi" estado="on" claseManejadora="informes"}
&nbsp;&nbsp;&nbsp;    ...
&nbsp;35    {/CWPanel}
&nbsp;&nbsp;&nbsp;    {CWContenedorPestanyas  id="Detalle"}
&nbsp;&nbsp;&nbsp;       {CWPestanya tipo="lis" panelAsociado="lisDetalle" estado="on"}
&nbsp;&nbsp;&nbsp;    {/CWContenedorPestanyas}
&nbsp;&nbsp;&nbsp;  <span class="bold"><strong>{/if}</strong></span>
&nbsp;40 
&nbsp;&nbsp;&nbsp; &lt;!-- ****************** Detalle 2: DEFICIENCIAS ***********************--&gt;
&nbsp;&nbsp;&nbsp;  <span class="bold"><strong>{if $smty_panelActivo eq "deficiencias" }</strong></span>
&nbsp;&nbsp;&nbsp;    {CWPanel id="ediDetalle" tipoComprobacion="envio" action="operarBD" method="post" detalleDe="edi" estado="on" claseManejadora="deficiencias"}
&nbsp;&nbsp;&nbsp;    ...
&nbsp;45    {/CWPanel}
&nbsp;&nbsp;&nbsp;    {CWContenedorPestanyas  id="Detalle"}
&nbsp;&nbsp;&nbsp;       {CWPestanya tipo="edi" panelAsociado="ediDetalle" estado="on"}
&nbsp;&nbsp;&nbsp;    {/CWContenedorPestanyas}
&nbsp;&nbsp;&nbsp;  <span class="bold"><strong>{/if}</strong></span>
&nbsp;50 
&nbsp;&nbsp;&nbsp; <span class="bold"><strong>{/if}</strong></span>
&nbsp;&nbsp;&nbsp; {/CWMarcoPanel}
&nbsp;&nbsp;&nbsp; {/CWVentana}</pre>
                             </div>
                        
               </div>
                   
            </div>
            
                
            <div class="section" title="4.1.2. &Aacute;rbol">
               <div class="titlepage">
                  <div>
                     <div>
                        <h3 class="title"><a name="d4e3444"></a>4.1.2. &Aacute;rbol
                        </h3>
                     </div>
                  </div>
               </div>
                     
               
                     
               <p>Vamos a explicar ahora como desarrollar un mantenimiento tipo
                        &aacute;rbol, uno de los patrones m&aacute;s complejos. El aspecto visual del &aacute;rbol es
                        el siguiente:
               </p>
               
                     
               <div class="mediaobject"><img src="images/pantallaArbol.jpg"></div>
               
                     
               <p>La pantalla se divide claramente en dos zonas. La zona de la
                        derecha se corresponde con lo que es el &aacute;rbol en s&iacute;, y la de la
                        izquierda corresponde con un panel com&uacute;n (tabular o registro). El
                        usuario puede ir navegando por el &aacute;rbol, expandiendo los nodos tal y
                        como se haya especificado en el c&oacute;digo, una vez llegado a la opci&oacute;n que
                        nos interese en la parte derecha aparecer&aacute; un panel que visualizar&aacute; los
                        datos correspondientes al nodo seleccionado (p.e. en la imagen se puede
                        ver que se muestra una factura del tercer trimestre para el a&ntilde;o 1993,
                        que es el nodo seleccionado).
               </p>
               
                     
               <div class="section" title="4.1.2.1. &iquest;C&oacute;mo definir la estructura del &aacute;rbol?">
                  <div class="titlepage">
                     <div>
                        <div>
                           <h4 class="title"><a name="d4e3451"></a>4.1.2.1. &iquest;C&oacute;mo definir la estructura del &aacute;rbol?
                           </h4>
                        </div>
                     </div>
                  </div>
                          
                  
                          
                  <p>Primero hay que tener claro como va a ser la estructura del
                             &aacute;rbol, para poder definir los nodos y hojas del &aacute;rbol. Est&aacute;s
                             definiciones, b&aacute;sicamente, se hacen declarando los "tipos" de nodos y
                             como se obtienen sus hijos, indicando qu&eacute; nodos aparecer&aacute;n en la raiz,
                             y los que vayan a ser hojas no tendr&aacute;n especificaci&oacute;n de sus hijos. De
                             esta forma obtenemos un &aacute;rbol muy flexible, en el que no hay que
                             preocuparse de los niveles que va a tener.
                  </p>
                  
                          
                  <p>Para definir un nodo (o nodo raiz) tenemos que especificar como
                             se obtienen sus hijos, esto se puede hacer de dos modos:
                  </p>
                  
                          
                  <div class="itemizedlist">
                     <ul class="itemizedlist" type="disc">
                        <li class="listitem">
                                       
                           <p><span class="bold"><strong>SELECT</strong></span>: Los hijos se
                                          obtienen a trav&eacute;s de una consulta a base de datos.
                           </p>
                                     
                        </li>
                        <li class="listitem">
                                       
                           <p><span class="bold"><strong>LISTA</strong></span>: Los hijos son fijos,
                                          se establecen mediante un array de valores.
                           </p>
                                     
                        </li>
                     </ul>
                  </div>
                  
                          
                  <p>Con estos dos modos de definici&oacute;n de nodos podemos ir dando la
                             estructura que queramos al &aacute;rbol.
                  </p>
                  
                          
                  <p>Como en el resto de pantallas, el programador tendr&aacute; que
                             completar un fichero TPL, un fichero PHP de views y, al menos dos,
                             ficheros PHP de actions. Vamos a ir explicando la estructura y como
                             trabajar en cada uno de estos ficheros.
                  </p>
                  
                          
                  <div class="section" title="4.1.2.1.1. Fichero de Actions">
                     <div class="titlepage">
                        <div>
                           <div>
                              <h5 class="title"><a name="d4e3464"></a>4.1.2.1.1. Fichero de Actions
                              </h5>
                           </div>
                        </div>
                     </div>
                               
                     
                               
                     <p>Lo primero que se debe crear es un fichero PHP donde se va a
                                  definir toda la estructura del &aacute;rbol. Este fichero extender&aacute; de la
                                  clase <span class="bold"><strong>gvHidraTreePatern</strong></span>, esta clase
                                  nos proporcionar&aacute; los m&eacute;todos adecuados para crear el &aacute;rbol.
                     </p>
                     
                               
                     <p>El comienzo de la clase es igual que cuando trabajamos con
                                  cualquier otro tipo de panel, cargando la conexi&oacute;n, tablas con las
                                  que trabajar... Pasamos a crear el &aacute;rbol en s&iacute;, para ello creamos un
                                  objeto de la clase <span class="bold"><strong>IgepArbol</strong></span> a
                                  partir del que definiremos la estructura con los m&eacute;todos:
                     </p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>addNodoRaiz($tipoNodo, $etiqueta,
                                                     $tipoDespliegue, $datosDespliegue, $conexion)</strong></span></p>
                              
                                            
                              <p>Con este m&eacute;todo crearemos el nodo ra&iacute;z, hay que tener en
                                               cuenta que podemos tener m&aacute;s de un nodo ra&iacute;z. Los par&aacute;metros que
                                               se necesitan para definirlo son:
                              </p>
                              
                                            
                              <div class="itemizedlist">
                                 <ul class="itemizedlist" type="circle">
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$tipoNodo</em></span>: Nombre con el que se
                                                            identificar&aacute; el nodo.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$etiqueta</em></span>: Texto que aparecer&aacute; en
                                                            pantalla este nodo. Importante no introducir retornos de
                                                            carro.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$tipoDespliegue</em></span>: Nos indica el
                                                            modo de obtenci&oacute;n de los nodos hijos, puede tomar dos
                                                            valores "SELECT", nodos hijos vienen de BD, o "LISTA", nodos
                                                            hijos fijados por un array.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$datosDespliegue</em></span>: Dependiendo de
                                                            lo dicho en $tipoDespliegue.
                                       </p>
                                       
                                                         
                                       <div class="itemizedlist">
                                          <ul class="itemizedlist" type="square">
                                             <li class="listitem">
                                                                      
                                                <p>Si tenemos "<span class="emphasis"><em>SELECT</em></span>": nos
                                                                         encontraremos un array en la que el primer par&aacute;metro se
                                                                         corresponder&aacute; con el identificador de los hijos de esta
                                                                         raiz, es decir, el primer nivel del &aacute;rbol. El segundo
                                                                         par&aacute;metro ser&aacute; la select que obtendr&aacute; los valores
                                                                         correspondientes a este primer nivel. En la consulta
                                                                         SELECT, debemos definir un campo de respuesta con nombre
                                                                         "etiqueta" que corresponder&aacute; con el texto que aparecer&aacute;
                                                                         en pantalla.
                                                </p>
                                                
                                                                      
                                                <div class="informalexample">
                                                                           
                                                   
                                                                           <pre class="programlisting">$arbol-&gt;<span class="bold"><strong>addNodoRaiz</strong></span>("ANYOS",
                    "A&amp;ntilde;os de Facturas",
                    "SELECT",
                    array(
                         "ANYO",
                         "select anyo||' ('||count (1)||')' as \"<span class="bold"><strong>etiqueta</strong></span>\",anyo from tinv_entradas group by anyo")
                    );</pre>
                                                                         </div>
                                                                    
                                             </li>
                                             <li class="listitem">
                                                                      
                                                <p>Si tenemos "<span class="emphasis"><em>LISTA</em></span>": Tendremos
                                                                         un array asociativo en el que se ir&aacute; dejando como &iacute;ndice
                                                                         la etiqueta de los nodos y como valor el tipo de hijo
                                                                         correspondiente.
                                                </p>
                                                
                                                                      
                                                <div class="informalexample">
                                                                           
                                                   
                                                                           <pre class="programlisting">$arbol-&gt;<span class="bold"><strong>addNodoRaiz</strong></span>('DECADAS',
                    'A&amp;ntilde;os',
                    'LISTA',
                    array(
                       'D&amp;eacute;cada de los 70'=&gt;'1970',
                       'D&amp;eacute;cada de los 80'=&gt;'1980',
                       'D&amp;eacute;cada de los 90'=&gt;'1990')
                   );</pre>
                                                                         </div>
                                                                    
                                             </li>
                                          </ul>
                                       </div>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$conexion</em></span>: Se puede indicar una
                                                            conexi&oacute;n alternativa a la propia del panel para el
                                                            despliegue de dicha ra&iacute;z.
                                       </p>
                                                       
                                    </li>
                                 </ul>
                              </div>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>addNodoRama($tipo,$modoDespliegue,$despliegue,$dsnAlternativo
                                                     = '')</strong></span></p>
                              
                                            
                              <p>La diferencia entre &eacute;ste y el anterior es peque&ntilde;a.
                                               B&aacute;sicamente, tiene dos diferencias. La primera es que no tiene
                                               el par&aacute;metro <span class="emphasis"><em>$etiqueta</em></span>, ya que la etiqueta
                                               sale de <span class="emphasis"><em>$datosDespliegue </em></span>de su nodo
                                               padre.
                              </p>
                              
                                            
                              <p>La segunda es que dentro de la definici&oacute;n de
                                               $datosDespliegue tiene un par&aacute;metro m&aacute;s destinado al paso de
                                               valores desde los nodos padre. Se trata de un array que hace
                                               referncia a los campos de cualquiera de los padres. Estos campos
                                               son "creados" por el framework y se pueden utilizar en la
                                               creaci&oacute;n de la select o en las etiquetas haciendo uso del
                                               caracter especial % (ver ejemplo a continuaci&oacute;n par&aacute;metro anyo
                                               en <span class="emphasis"><em>DGS</em></span>).
                              </p>
                              
                                            
                              <p>Todos los nodos del &aacute;rbol excepto los que est&eacute;n en la ra&iacute;z
                                               se definen con este m&eacute;todo.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>setNodoPanel($tipoNodo,
                                                     $claseManejadora, $dependencia, $conexion)</strong></span></p>
                              
                                            
                              <p>Este m&eacute;todo permite al programador indicar que cierto tipo
                                               de nodo tiene asociada una representaci&oacute;n en un panel asociado
                                               al arbol. Los par&aacute;metros que se necesitan en este m&eacute;todo
                                               son:
                              </p>
                              
                                            
                              <div class="itemizedlist">
                                 <ul class="itemizedlist" type="circle">
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$tipoNodo</em></span>: Indicamos el tipo de
                                                            nodo que se va a representar, que debe coincidir con alguno
                                                            de los definidos con el m&eacute;todo
                                                            <span class="emphasis"><em>addNodoRama()</em></span>.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$claseManejadora</em></span>: Nombre de la
                                                            clase manejadora que define ese panel.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$dependencia</em></span>: Un array con los
                                                            campos que debe coger de los nodos superiores para
                                                            pas&aacute;rselos al panel antes de realizar la b&uacute;squeda.
                                       </p>
                                                       
                                    </li>
                                    <li class="listitem">
                                                         
                                       <p><span class="emphasis"><em>$conexion</em></span>: Posibilidad de
                                                            establecer una conexi&oacute;n alternativa para este panel en
                                                            concreto.
                                       </p>
                                                       
                                    </li>
                                 </ul>
                              </div>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p>A continuaci&oacute;n vemos un ejemplo de como se crea la estructura
                                  de un &aacute;rbol:
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">&lt;?php

class PruebaArbol extends <span class="bold"><strong>gvHidraTreePattern</strong></span>
{

  function PruebaArbol()
  {
      $conf = ConfigFramework::getConfig();
      $g_dsn = $conf-&gt;getDSN('g_dsn');
      $nombreTablas= array("tinv_entradas");
      parent::__construct($g_dsn,$nombreTablas);

      $arbol = new <span class="bold"><strong>IgepArbol</strong></span>();
      $arbol-&gt;<span class="bold"><strong>addNodoRaiz</strong></span>("ANYOS","A&amp;ntilde;os de Facturas","SELECT",array("ANYO","select anyo||' ('||count (1)||')' as \"etiqueta\",anyo from tinv_entradas group by anyo"));

      $arbol-&gt;<span class="bold"><strong>addNodoRama</strong></span>("ANYO","LISTA",array("Por DG" =&gt;"DGS","Por Trimestre"=&gt;"TRIMESTRES","Ver Todas"=&gt;"TODAS"));
      $arbol-&gt;addNodoRama("DGS","SELECT",array("FACTURA-DG","SELECT anyo,cdg,cdg as \"etiqueta\" FROM TINV_ENTRADAS WHERE anyo = '%anyo%' group by anyo,cdg order by cdg",array("anyo")));
      $arbol-&gt;addNodoRama("FACTURA-DG","SELECT",array("FACTURA","SELECT anyo||'-'||nfactura as \"etiqueta\",anyo,nfactura FROM TINV_ENTRADAS WHERE anyo = '%anyo%' and cdg ='%cdg%'",array("anyo","cdg")));
      ...
      $arbol-&gt;<span class="bold"><strong>setNodoPanel</strong></span>("ANYO","TinvFacturasArbol",array("anyo"),"Facturas de %anyo%");
      $arbol-&gt;setNodoPanel("FACTURA-DG","TinvFacturasArbol",array("anyo","cdg"),"Facturas de %anyo% de la %cdg%");
      ...
      $this-&gt;<span class="bold"><strong>addArbol</strong></span>($arbol);
      ...
}
?&gt;</pre>
                                  </div>
                     
                               
                     <p>Adem&aacute;s de este fichero que crea la estructura principal, se
                                  debe crear un fichero php en el directorio actions por cada nodo
                                  panel que hayamos definido. Estas clases ya son clases manejadoras
                                  de un panel convencional (p.ej. un tabular, registro...).
                     </p>
                             
                  </div>
                  
                          
                  <div class="section" title="4.1.2.1.2. Fichero de Views">
                     <div class="titlepage">
                        <div>
                           <div>
                              <h5 class="title"><a name="d4e3542"></a>4.1.2.1.2. Fichero de Views
                              </h5>
                           </div>
                        </div>
                     </div>
                               
                     
                               
                     <p>A continuaci&oacute;n debemos crear un archivo php en el directorio
                                  <span class="bold"><strong>views</strong></span> que controle la presentaci&oacute;n.
                                  En &eacute;l se definen las asignaciones de los datos a la plantilla (tpl).
                                  En este caso no es un comportamiento gen&eacute;rico por lo tanto hay que
                                  instanciar la clase <span class="bold"><strong>IgepPanelArbol</strong></span>
                                  (l&iacute;nea 3) que define el comportamiento del &aacute;rbol, al que se le pasan
                                  los mismos par&aacute;metros que una pantalla gen&eacute;rica, el primero ser&aacute; el
                                  nombre de la <span class="emphasis"><em>clase manejadora</em></span> que corresponde a
                                  ese panel, y el segundo, <span class="emphasis"><em>smty_datosPanel</em></span>,
                                  variable smarty que se habr&aacute; definido en la tpl correspondiente al
                                  &aacute;rbol. Activaremos la pesta&ntilde;a, m&eacute;todo <span class="bold"><strong>activarModo</strong></span>. Finalizamos agregando el &aacute;rbol
                                  al panel con <span class="bold"><strong>agregarPanelArbol()</strong></span>.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">&nbsp;&nbsp;1 &lt;?php
&nbsp;&nbsp;&nbsp;  $comportamientoVentana= new IgepPantalla();
&nbsp;&nbsp;&nbsp;  $panel = new <span class="bold"><strong>IgepPanelArbol</strong></span>('PruebaArbol',"smty_datosPanel");
&nbsp;&nbsp;&nbsp;  $panel-&gt;activarModo("edi","estado_edi");
&nbsp;&nbsp;5  $comportamientoVentana-&gt;<span class="bold"><strong>agregarPanelArbol</strong></span>($panel);
&nbsp;&nbsp;&nbsp;  $s-&gt;display('p_pruebaArbol.tpl');
&nbsp;&nbsp;&nbsp; ?&gt;</pre>
                                  </div>
                             
                  </div>
                  
                          
                  <div class="section" title="4.1.2.1.3. Fichero de Plantillas (TPL)">
                     <div class="titlepage">
                        <div>
                           <div>
                              <h5 class="title"><a name="d4e3555"></a>4.1.2.1.3. Fichero de Plantillas (TPL)
                              </h5>
                           </div>
                        </div>
                     </div>
                               
                     
                               
                     <p>Este fichero debe contener por un lado el &aacute;rbol, y por otra
                                  parte, tantos paneles como tipos de nodos representables existan en
                                  el panel, los indicados con el m&eacute;todo <span class="bold"><strong>setNodoPanel()</strong></span>. Es importante tener en cuenta
                                  que se ha de mostrar s&oacute;lo el panel activo, y para ello utilizamos la
                                  clausula <span class="emphasis"><em>{if}</em></span> de Smarty, en la variable
                                  <span class="emphasis"><em>$smty_panelVisible</em></span> nos vendr&aacute; el panel que
                                  queremos activo, es decir, nos vendr&aacute; el identificador que le
                                  habremos dado cuando hemos definido los nodos.
                     </p>
                     
                               
                     <p>A continuaci&oacute;n mostramos la tpl utilizada para el
                                  ejemplo:
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">{CWVentana tipoAviso=$smty_tipoAviso codAviso=$smty_codError descBreve=$smty_descBreve textoAviso=$smty_textoAviso}
{CWBarra usuario=$smty_usuario codigo=$smty_codigo}
    {CWMenuLayer name="$smty_nombre" cadenaMenu="$smty_cadenaMenu"}    
{/CWBarra}
{CWMarcoPanel conPestanyas="true"}
&lt;!-- ****************** PANEL edi ***********************--&gt;
<span class="bold"><strong>{CWArbol estado=$estado_edi arbol=$smty_objArbol}</strong></span>
    <span class="bold"><strong>{if $smty_panelVisible == "ANYOS" || $smty_panelVisible == "FACTURA-DG"}</strong></span>
        {CWPanel id="edi" tipoComprobacion="envio" itemSeleccionado=$smty_filaSeleccionada action="operarTabla" method="post" estado="on" claseManejadora="TinvFacturasArbol" accion=$smty_operacionFichaTinvFacturasArbol}
        {CWBarraSupPanel titulo=$smty_tituloPanel}
            {CWBotonTooltip imagen="01" titulo="Insertar registro" funcion="insertar" actuaSobre="ficha"}
            {CWBotonTooltip imagen="02" titulo="Modificar registro" funcion="modificar" actuaSobre="ficha"}
            {CWBotonTooltip imagen="03" titulo="Eliminar registro" funcion="eliminar" actuaSobre="ficha"}
            {CWBotonTooltip imagen="04" titulo="Limpiar registro" funcion="limpiar" actuaSobre="edicion"}
        {/CWBarraSupPanel}
        {CWContenedor}
            {CWFichaEdicion id="FichaEdicion" datos=$smty_datosPanel numPagInsertar="1"}
                {CWFicha}
                        {CWCampoTexto nombre="anyo" editable="true" size="4" value=$smty_anyoNuevo textoAsociado="A&amp;ntilde;o"}
                        &amp;nbsp;&amp;nbsp;
                        {CWCampoTexto nombre="nfactura" editable="false" size="6" value ="0" textoAsociado="N&amp;uacute;mero Factura"}
                        &lt;br /&gt;&lt;br /&gt;
                        {CWLista nombre="procedencia"  radio="true" editable="true" datos=$smty_datosPreInsertadosTinvFacturasArbol.procedencia textoAsociado="Procedencia"}
                        &lt;br /&gt;&lt;br /&gt;
                        {CWCampoTexto nombre="cif" editable="true" size="13" maxlength="13" textoAsociado="Cif"}
                        &amp;nbsp;
                        {CWCampoTexto nombre="orden" editable="true" size="2" maxlength="2" textoAsociado="Orden" actualizaA="nombre"} 
                        &amp;nbsp;{CWCampoTexto nombre="nombre" editable="false" size="40"}
                        {CWBotonTooltip imagen="13" titulo="Ventana de seleccion" funcion="abrirVS" actuaSobre="cif" claseManejadora="TinvFacturasArbol"}
                        &lt;br /&gt;&lt;br /&gt;
                        {CWLista nombre="cdg" size="2" editable="true" datos=$smty_datosPreInsertadosTinvFacturasArbol.cdg textoAsociado="D.General"}
                        {CWCampoTexto nombre="fadquisicion" editable="true" size="10" conCalendario="true" textoAsociado="Fecha Adq"}
                        &lt;br /&gt;&lt;br /&gt;
                        {CWCampoTexto nombre="fcertificacion" editable="false" size="10" textoAsociado="Fecha Certif"} 
                        &amp;nbsp;&amp;nbsp;
                        {CWCampoTexto nombre="codFactura" editable="true" size="13" maxlength="13" textoAsociado="Cod. Factura"}
                        &lt;/br&gt;&lt;/br&gt;
                {/CWFicha}
                {CWPaginador enlacesVisibles="3"}
            {/CWFichaEdicion}
        {/CWContenedor}
        {CWBarraInfPanel}
            {CWBoton imagen="41" texto="Guardar" class="boton" accion="guardar" vCamposComprobar=$smty_validacionesTinvFacturasArbol}
            {CWBoton imagen="42" texto=" Cancelar" class="boton" accion="guardar" action="IgepPruebaArbol__cancelarArbol"}
        {/CWBarraInfPanel} 
    {/CWPanel}           
  <span class="bold"><strong>{else}</strong></span>
    {CWPanel id="edi" tipoComprobacion="envio" action="operarTabla" method="post" detalleDe="edi" estado=$estado_edi claseManejadora=""}
        {CWBarraSupPanel titulo=""}
        {/CWBarraSupPanel}        
        {CWContenedor}                     
            {CWFichaEdicion  id="FichaDetalle" datos=$smty_datosPanel numPagInsertar="0"}
                {CWFicha}
                   &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
                   NO HAY DATOS
                   &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
                {/CWFicha}
            {/CWFichaEdicion}
        {/CWContenedor}
        {CWBarraInfPanel}
            {CWBoton imagen="42" texto=" Cancelar" class="boton" accion="guardar" action="IgepPruebaArbol__cancelarArbol"}
        {/CWBarraInfPanel}
    {/CWPanel}    
  <span class="bold"><strong>{/if}        
{/CWArbol}</strong></span>
&lt;!-- ****************** PESTA&Ntilde;AS ************************--&gt;    
    {CWContenedorPestanyas}
        {CWPestanya tipo="edi" estado=$estado_edi}
    {/CWContenedorPestanyas}
{/CWMarcoPanel}
{/CWVentana}</pre>
                                  </div>
                             
                  </div>
                        
               </div>
               
                     
               <div class="section" title="4.1.2.2. Otro ejemplo">
                  <div class="titlepage">
                     <div>
                        <div>
                           <h4 class="title"><a name="d4e3568"></a>4.1.2.2. Otro ejemplo
                           </h4>
                        </div>
                     </div>
                  </div>
                          
                  
                          
                  <p>A continuaci&oacute;n se muestra un ejemplo en el que la definici&oacute;n de
                             jerarqu&iacute;a est&aacute; definida en un &uacute;nico campo (subconcepto) y en funcion
                             de su longitud obtenemos el tipo de nodo. La jerarqu&iacute;a de nodos
                             buscada es:
                  </p>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">ANYOS
   ANYO
      CAP1    (longitud 1)
         CAP2    (longitud 2)
            CAP3    (longitud 3)
               CAP5   (longitud 5)</pre>
                             </div>
                  
                          
                  <p>La forma de definir los nodos seria, partiendo de cada nodo
                             ra&iacute;z, ir definiendo como se obtienen los nodos hijos y as&iacute;
                             sucesivamente hasta tener definidos todos los nodos. Puesto que el
                             nodo CAP5 no tiene hijos no necesitamos definir ese nodo.
                  </p>
                  
                          
                  <div class="informalexample">
                               
                     
                               <pre class="programlisting">...
$arbol-&gt;addNodoRaiz('ANYOS', 'A&amp;ntilde;os de Subconceptos', 'SELECT',
        array('ANYO',"select concat(concat(concat(anyo,' ('),count(1)),')') as \"etiqueta\", anyo 
                      from tcom_subconceptos_anyo group by anyo"));
$arbol-&gt;addNodoRama('ANYO',  'SELECT',
        array('CAP1',"SELECT anyo, subconcepto, concat(concat(subconcepto,' '),descrip) as \"etiqueta\" 
                      FROM tcom_subconceptos_anyo WHERE anyo = %anyo% and length(subconcepto)=1 
                      order by subconcepto", array("anyo")));
$arbol-&gt;addNodoRama('CAP1',  'SELECT',
        array('CAP2',"SELECT anyo, subconcepto, concat(concat(subconcepto,' '),descrip) as \"etiqueta\"
                     FROM tcom_subconceptos_anyo 
                     WHERE anyo = %anyo% and substr(subconcepto,1,1)='%subconcepto%' and length(subconcepto)=2 
                     order by anyo,subconcepto", array("anyo",'subconcepto')));
$arbol-&gt;addNodoRama('CAP2',  'SELECT',
        array('CAP3',"SELECT anyo, subconcepto, concat(concat(subconcepto,' '),descrip) as \"etiqueta\" 
                     FROM tcom_subconceptos_anyo 
                     WHERE anyo = %anyo% and substr(subconcepto,1,2)='%subconcepto%' and length(subconcepto)=3 
                     order by anyo,subconcepto", array("anyo",'subconcepto')));
$arbol-&gt;addNodoRama('CAP3',  'SELECT',
        array('CAP5',"SELECT anyo, subconcepto, concat(concat(subconcepto,' '),descrip) as \"etiqueta\" 
                     FROM tcom_subconceptos_anyo 
                     WHERE anyo = %anyo% and substr(subconcepto,1,3)='%subconcepto%' and length(subconcepto)=5 
                     order by anyo,subconcepto", array("anyo",'subconcepto')));
...</pre>
                             </div>
                        
               </div>
                   
            </div>
              
         </div>
         
           
         
           
         
           
         
           
         
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch03s10.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="Parte_2.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch04s02.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">3.10. Uso de datos por defecto&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;4.2. Componentes complejos</td>
            </tr>
         </table>
      </div>
   </body>
</html>